<template>
	<view>
		<u-navbar :border-bottom='false' back-icon-size='50' title="我的订单"></u-navbar>
		<view class="tab-bar">
			<u-tabs :list="tabList" :is-scroll="false" active-color="#333333" bar-height='4' bar-width='64'
				:bar-style='barStyle' :current="current" @change="tabChange" :bold='false'></u-tabs>
		</view>
		<view class="main">
			<view class="orderList">
				<view class="orderList-item" @click="navTo('./hotelOrderDetail')">
					<view class="date">
						预定日期: 01-22
					</view>
					<view class="hotelBox">
						<view class="title">
							<view class="left">
								<image src="../../../static/imgs/jiudian.png" mode=""></image>
								<text>深圳福田希尔顿酒店</text>
							</view>
							<view class="right">
								<view class="price">
									¥ 8999
								</view>
								<view class="status">
									已取消
								</view>
							</view>
						</view>
						<view class="orderInfo">
							<view class="shop">
								罗湖春风路店
							</view>
							<view class="time">
								2021-03-14至 2021-03-15 1晚/1间
							</view>
						</view>
						<view class="btn">
							
							<view class="btn-item">
								删除
							</view>
						</view>
					</view>
				</view>
				
				<view class="orderList-item" @click="navTo('./hotelOrderDetail')">
					<view class="date dateAct">
						预定日期: 01-22
					</view>
					<view class="hotelBox">
						<view class="title">
							<view class="left">
								<image src="../../../static/imgs/jiudian.png" mode=""></image>
								<text>深圳福田希尔顿酒店</text>
							</view>
							<view class="right">
								<view class="price" style="color: #F57426;">
									¥ 8999
								</view>
								<view class="status">
									已取消
								</view>
							</view>
						</view>
						<view class="orderInfo">
							<view class="shop">
								罗湖春风路店
							</view>
							<view class="time">
								2021-03-14至 2021-03-15 1晚/1间
							</view>
						</view>
						<view class="btn">
							<view class="btn-item">
								去支付
							</view>
							<view class="btn-item">
								删除
							</view>
						</view>
					</view>
				</view>
				
				<view class="orderList-item" @click="navTo('./hotelOrderDetail')">
					<view class="date dateAct">
						预定日期: 01-22
					</view>
					<view class="hotelBox">
						<view class="title">
							<view class="left">
								<image src="../../../static/imgs/jiudian.png" mode=""></image>
								<text>深圳福田希尔顿酒店</text>
							</view>
							<view class="right">
								<view class="price" style="color: #F57426;">
									¥ 8999
								</view>
								<view class="status">
									已取消
								</view>
							</view>
						</view>
						<view class="orderInfo">
							<view class="shop">
								罗湖春风路店
							</view>
							<view class="time">
								2021-03-14至 2021-03-15 1晚/1间
							</view>
						</view>
						<view class="btn">
							<view class="btn-item">
								查看详情
							</view>
							<view class="btn-item">
								去支付
							</view>
							<view class="btn-item">
								删除
							</view>
						</view>
					</view>
				</view>
				
			</view>
			
			<view class="noCont">
				<image src="../../../static/imgs/zanwujl.png" mode=""></image>
				<text>暂无订单</text>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				barStyle: {
					background: 'linear-gradient(180deg, #6ABCFC 0%, #048FFE 100%)'
				},
				tabList: [{
						name: '全部'
					},
					{
						name: '代付款'
					},
					{
						name: '预定成功'
					},
					{
						name: '退款'
					},
				]
			}
		},
		methods:{
			tabChange(index){
				this.current = index
			},
			navTo(url){
				uni.navigateTo({
					url:url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		padding: 28rpx;
		.orderList {
			.orderList-item {
				margin-bottom: 40rpx;
				.date {
					width: 206rpx;
					height: 44rpx;
					background: #D0D2D5;
					border-radius: 40rpx;
					font-size: 24rpx;
					font-family: Arial;
					font-weight: 400;
					line-height: 44rpx;
					color: #FFFFFF;
					text-align: center;
				}
				& .dateAct {
					background: #3587F7;
				}
				
				.hotelBox {
					width: 694rpx;
					height: auto;
					background: #FFFFFF;
					border-radius: 16rpx;
					margin-top: 10rpx;
					padding: 0 20rpx;
					.title {
						width: 100%;
						height: 100rpx;
						display: flex;
						align-items: center;
						.left {
							height: 100rpx;
							display: flex;
							align-items: center;
							image {
								width: 28rpx;
								height: 28rpx;
							}
							text {
								font-size: 32rpx;
								font-family: Arial;
								font-weight: bold;
								color: #333333;
								margin-left: 10rpx;
							}
						}
						.right {
							margin-left: auto;
							.price {
								font-size: 32rpx;
								font-family: Segoe UI;
								font-weight: 400;
								color: #333333;
							}
							.status {
								font-size: 24rpx;
								font-family: Segoe UI;
								font-weight: 400;
								line-height: 14px;
								color: #333333;
							}
						}
					}
					.orderInfo {
						.shop {
							font-size: 28rpx;
							font-family: Arial;
							font-weight: 400;
							color: #999999;
						}
						.time {
							font-size: 20rpx;
							font-family: Arial;
							font-weight: 400;
							color: #999999;
							margin-top: 8rpx;
						}
					}
					.btn {
						width: 100%;
						height: 100rpx;
						display: flex;
						align-items: center;
						justify-content: flex-end;
						.btn-item {
							width:fit-content; 
							height: 60rpx;
							background: #FFFFFF;
							border: 2rpx solid rgba(153, 153, 153, 0.4980392156862745);
							border-radius: 8rpx;
							line-height: 60rpx;
							text-align: center;
							padding: 0 20rpx;
							margin-left: 20rpx;
						}
					}
				}
			}
		}
		.noCont {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			image {
				width: 520rpx;
				height: 380rpx;
			}
		}
	}
</style>
